<template>
  <div
    @click="goCenterProduct(dataInfo.centerProducts[0])"
    v-if="dataInfo && dataInfo.centerProducts && dataInfo.centerProducts.length > 0 && dataInfo.centerProducts[0]"
    class="c-pv24 c-ph24 c-bd-b12-f5 c-flex-row"
  >
    <div class="c-ww180 c-hh120 c-br10 c-text-hidden c-p">
      <vip-custom-img
        :cover="dataInfo.centerProducts[0].vipInfo.cover"
        :imgClass="'c-w100 c-br10'"
        :hasText="false"
        v-if="(dataInfo.centerProducts[0].prodType == cfrom.vip || dataInfo.centerProducts[0].prodType == cfrom.svip) && dataInfo.centerProducts[0].vipInfo && dataInfo.centerProducts[0].vipInfo.cover"
      />
      <img
        v-else
        class="c-w100 c-br10"
        :src="$addXossFilter(dataInfo.centerProducts[0].prodType == cfrom.datum ? (dataInfo.centerProducts[0].avatar ? dataInfo.centerProducts[0].avatar : require('@/assets/i/wap/datum/icon_com.png')) : (dataInfo.centerProducts[0].prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (dataInfo.centerProducts[0].prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : (dataInfo.centerProducts[0].avatar || require('@/assets/defult270.png')))))"
        alt=""
      >
      <div class="c-fc-white c-pa c-p-t0 c-p-l0 c-fs20 c-ph10 hot-gradient-bg c-hh32 c-lh34 c-br-br10"><span class="iconfont c-fs22 c-mr4">&#xe7bc;</span>人气推荐</div>
    </div>
    <div class="c-w0 c-flex-grow1 c-pl20 c-flex-column c-justify-sb">
      <div class="c-fs24 c-fc-xblack c-text-ellipsis2">{{dataInfo.centerProducts[0].name}}</div>
      <template v-if="dataInfo.centerProducts[0].prodType == cfrom.circle">
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <div class="c-fs22 c-fc-gray">
            <span class="theme-fc">{{dataInfo.centerProducts[0].memberCount}}</span>人已加入
          </div>
          <div class="c-ww144 c-hh48 c-br24 theme-bg c-flex-row c-flex-center c-fc-white c-fs22">立即加入</div>
        </div>
      </template>
      <template v-else>
        <div
          v-if="dataInfo.centerProducts[0].isSaleOnly == 0 && dataInfo.centerProducts[0].isSaleTogether == 1"
          class="c-fs26 c-fc-xmlred"
        >关联售卖</div>
        <div
          v-else
          class="c-fs26 c-fc-xmlred"
        >
          <span class="c-fs22" v-if="dataInfo.centerProducts[0].payType == 2 || (dataInfo.centerProducts[0].prodType == cfrom.camp && dataInfo.centerProducts[0].payType == 0)">{{'￥' | iosPriceFilter}}</span>
          {{dataInfo.centerProducts[0].payType | priceValueFilter(dataInfo.centerProducts[0].prodPrice, dataInfo.centerProducts[0].prodType, dataInfo.centerProducts[0].optimal)}}
        </div>
      </template>
      <!-- <div
        v-else-if="dataInfo.centerProducts[0].payType == 1"
        class="c-fs22 hot-price-fc"
      >免费</div>
      <div
        v-else-if="dataInfo.centerProducts[0].payType == 2 || (dataInfo.centerProducts[0].prodType == cfrom.camp && dataInfo.centerProducts[0].payType == 0)"
        class="c-fs22 hot-price-fc"
      >
        <span>{{'￥' | iosPriceFilter}}</span>{{dataInfo.centerProducts[0].prodPrice | moneyStr}}
      </div>
      <div
        v-else-if="dataInfo.centerProducts[0].payType == 3"
        class="c-fs22 hot-price-fc"
      >加密</div> -->
    </div>
  </div>
</template>

<script>
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
export default {
  name: 'CourseAdvocate',
  components: {
    VipCustomImg
  },
  props: {
    dataInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      cfrom: global.ckFrom,
    }
  },
  methods: {
    goCenterProduct(tItem) {
      this.$emit('goCenterProduct', tItem)
    }
  },
}
</script>

<style lang="scss" scoped>
.hot-gradient-bg {
  background: linear-gradient(90deg, #ff3612, #ffbb4e);
}
.hot-price-fc {
  color: #fe9901;
}
</style>